<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>弹性布局-弹性缩写(flex layout - flex abbreviation)</title>
  <!-- 
  flex 是CSS中用于设置弹性盒子属性的缩写属性，包括 flex-grow 、 flex-shrink 和 flex-basis 三个子属性。flex 属性的总结： 
 
    1.  flex: <flex-grow> <flex-shrink> <flex-basis>  
      -  <flex-grow> ：定义项目的放大比例，即项目在剩余空间中所占的比例。 
      -  <flex-shrink> ：定义项目的缩小比例，即项目在空间不足时所占的比例。 
      -  <flex-basis> ：定义项目的初始主轴尺寸。 
   -->
   <style>
    .display-flex-basis {
      display: flex;
      width: 500px;
      height: 200px;
      background-color: #f0f0f0;
    }

    /* 注意: 使用后代 ">" 选择器无效, 例如: .display-flex-basis > .item */
    .item {
      width: 130px;
      height: 100px;
      border: 1px solid #000;
      
      /* 
        flex顺序: <flex-grow> <flex-shrink> <flex-basis>
          1. none: 默认值，不放大也不缩小，即项目将占据固定空间, 相当于 0 0 auto。
          2. initial: 初始值，相当于 0 1 0。
          3. inherit: 继承父元素的 flex 属性值。
          4. <length>: 定义固定宽度或高度，单位可以是 px、em、rem 等。
          5. auto: 自动计算宽度或高度，根据其他属性值来确定, 相当于 1 1 auto。
      */
      flex: 0 0 50px;
    }
  </style>
</head>
<body>
  
  <div class="display-flex-basis">
    <div class="item basis1">1</div>
    <div class="item basis2">my name basis two</div>
    <div class="item basis3">3</div>
    <div class="item basis4">4</div>
  </div>

  <script src="./js/itemRandomColor.js"></script>

</body>
</html>